<template>
    <!-- 添加按钮 -->
    <div class="add-box">
        <div>
            <el-icon>
                <Tickets />
            </el-icon>数据列表
        </div>
        <div>
            <el-button @click="showAddFlash">添加</el-button>
        </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="product.name" label="商品名称" />
        <el-table-column label="货号">
            <template #default="scope">
                NO.
            </template>
        </el-table-column>
        <el-table-column label="商品价格" prop="product.price">
            <template #default="scope">
                ￥0
            </template>
        </el-table-column>
        <el-table-column label="剩余数量">
            <template #default="scope">
                0
            </template>
        </el-table-column>
        <el-table-column prop="flashPromotionPrice" label="秒杀价格">
            <template #default="scope">
                {{ filterPrice(scope.row.flashPromotionPrice) }}
            </template>
        </el-table-column>
        <el-table-column prop="flashPromotionCount" label="秒杀数量" />
        <el-table-column prop="flashPromotionLimit" label="限购数量" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="address" label="操作">
            <template #default="scope">
                <el-button type="primary" link @click="toEdit(scope.row)">编辑</el-button>
                <el-button type="primary" link @click="remove(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination background layout="total, sizes, prev, pager, next ,jumper" :total="pageTotal"
            v-model:currentPage="listParams.pageNum" @update:current-page="changePageNum"
            @update:page-size="changePageSize" :page-sizes="[5, 10, 15]" :page-size="5" />
    </ElConfigProvider>

    <!-- 添加对话框 -->
    <AddProductRelation :addShow="addShow" @hideAdd="hideAdd" />

    <!-- 编辑对话框 -->
    <EditProductRelation :editShow="editShow" @hideEdit="hideEdit" :nowId="nowId" :nowName="nowName"
        :nowProductId="nowProductId" />
</template>

<script setup lang="ts">
import { Tickets } from '@element-plus/icons-vue'
import { marketing } from "@/api"
import { reactive, ref, toRefs } from 'vue';
import { useRoute } from "vue-router"
import { ElMessageBox, ElMessage, ElConfigProvider } from 'element-plus';
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import AddProductRelation from "./components/AddProductRelation.vue"
import EditProductRelation from "./components/EditProductRelation.vue"




interface IState {
    listParams: IUserListParams,
    tableData: IQueryPageFlashRSPList[],
    pageTotal: number,
    nowId: number,
    nowName: string,
    nowProductId: number
}

const state: IState = reactive({
    listParams: {
        keyword: "",
        pageNum: 1,
        pageSize: 5
    },
    tableData: [],
    pageTotal: 0,
    nowId: 0,
    nowName: "",
    nowProductId: 0
})

const route = useRoute()
const addShow = ref(false)
const editShow = ref(false)

const filterPrice = (val: number | string) => {
    if (!val) {
        return ""
    }
    return "￥" + val
}

const getQueryPageFlashList = () => {
    if (route.query.flashPromotionId && route.query.flashPromotionSessionId) {
        marketing.queryPageFlashList({
            pageNum: state.listParams.pageNum,
            pageSize: state.listParams.pageSize,
            flashPromotionId: +route.query.flashPromotionId,
            flashPromotionSessionId: +route.query.flashPromotionSessionId
        }).then(res => {
            if (res.code === 200) {
                // console.log(res.data);
                state.tableData = res.data.list
                state.pageTotal = res.data.total
            }
        })
    }
}
getQueryPageFlashList()


const remove = (id: number) => {
    ElMessageBox.confirm(
        '是否要删除该活动',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        marketing.removefFashProductRelationApi(id).then(res => {
            if (res.code === 200) {
                ElMessage.success("删除成功")
                getQueryPageFlashList()
            }
        })
    }).catch(() => {
    })
}

const changePageNum = (val: number) => {
    // console.log(val);
    state.listParams.pageNum = val
    getQueryPageFlashList()
}

const changePageSize = (val: number) => {
    // console.log(val);
    state.listParams.pageSize = val
    getQueryPageFlashList()
}

const showAddFlash = () => {
    addShow.value = true
}

const hideAdd = () => {
    addShow.value = false
    getQueryPageFlashList()
}

const hideEdit = () => {
    editShow.value = false
    getQueryPageFlashList()
}

const toEdit = (row: any) => {
    console.log(row);
    state.nowId = row.id
    state.nowName = row.product.name
    state.nowProductId = row.productId
    editShow.value = true
}

const { tableData, pageTotal, listParams, nowId, nowName, nowProductId } = toRefs(state)
</script>

<style scoped lang="less">
.add-box {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 0 4px 2px #ccc;
}
</style>